<template>
  <view class="tab">
    <view
      class="tab-item"
      v-for="(item, i) in tabList"
      :key="i"
      @click="tabClick(i, item)"
    >
      <view :class="['tab-item-text', i == tabIndex ? 'active' : '']"
        >{{ item.label }}({{ item.len }})</view
      >
    </view>
  </view>
</template>
<script setup>
import { ref, defineProps, defineEmits } from "vue";
const props = defineProps({
  tabList: {
    type: Array,
    default: [], // 选项卡列表
  },
});
const emits = defineEmits(["tabClick"]);
const tabIndex = ref(0);
const tabClick = (i, item) => {
  tabIndex.value = i;
  emits("tabClick", item);
};
</script>
<style lang="scss" scoped>
.tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  height: 100rpx;
  background: #fff;
  border-bottom: 4rpx solid #f2f2f2;
}

.tab-item {
  flex: 1;
  text-align: center;
  line-height: 100rpx;
  margin-right: 15rpx;
}
.tab-item-text {
  font-size: 32rpx;
  color: #999;
}
.active {
  color: #267a58;
  font-weight: bold;
  height: 100rpx;
  border-bottom: 8rpx solid #267a58;
}
</style>
